<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>translate</title>
    <style type="text/css">
        p{
            font-size: 15px;
            color: red;
            font-weight: bold;
        }
        #box1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box1{
            transform: translate(10px);
            -webkit-transform:translate(10px);
            -moz-transform:translate(10px);
            -ms-transform:translate(10px);
        }
        .box2{
            transform: translate(20px);
            -webkit-transform:translate(20px);
            -moz-transform:translate(20px);
            -ms-transform:translate(20px);
        }
        .box3{
            transform: translate(20px,10px);
            -webkit-transform:translate(20px,10px);
            -moz-transform:translate(20px,10px);
            -ms-transform:translate(20px,10px);
        }
        .box4{
            transform: translate(20px,20px);
            -webkit-transform:translate(20px,20px);
            -moz-transform:translate(20px,20px);
            -ms-transform:translate(20px,20px);
        }
        .box5{
            transform: translate(50px,50px);
            -webkit-transform:translate(50px,50px);
            -moz-transform:translate(50px,50px);
            -ms-transform:translate(50px,50px);
        }
        .box6{
            transform: translate(100px,100px);
            -webkit-transform:translate(100px,100px);
            -moz-transform:translate(100px,100px);
            -ms-transform:translate(100px,100px);
        }
        .box7{
            transform: translate(-25px,-25px);
            -webkit-transform:translate(-25px,-25px);
            -moz-transform:translate(-25px,-25px);
            -ms-transform:translate(-25px,-25px);
        }
        .box8{
            transform: translate(0px,0px);
            -webkit-transform: translate(0px,0px);
            -moz-transform: translate(0px,0px);
            -ms-transform: translate(0px,0px);
        }
    </style>
</head>
<body>
    <p>css属性：</p>
        transform
    <br/>
    <input type="radio" onclick="fn1()" name="se"/>translate(10px)
    <br/>
    <input type="radio" onclick="fn2()" name="se"/>translate(20px)
    <br/>
    <input type="radio" onclick="fn3()" name="se"/>translate(20px,10px)
    <br/>
    <input type="radio" onclick="fn4()" name="se"/>translate(20px,20px)
    <br/>
    <input type="radio" onclick="fn5()" name="se"/>translate(50px,50px)
    <br/>
    <input type="radio" onclick="fn6()" name="se"/>translate(100px,100px)
    <br/>
    <input type="radio" onclick="fn7()" name="se"/>translate(-25px,-25px)
    <br/>
    <input type="radio" onclick="fn8()" name="se"/>none

    <p>结果</p>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<script type="text/javascript">
    function fn1(){
        var box2=document.getElementById("box2");
        box2.className="box1"
    }
    function fn2(){
        var box2=document.getElementById("box2");
        box2.className="box2"
    }
    function fn3(){
        var box2=document.getElementById("box2");
        box2.className="box3"
    }
    function fn4(){
        var box2=document.getElementById("box2");
        box2.className="box4"
    }
    function fn5(){
        var box2=document.getElementById("box2");
        box2.className="box5"
    }
    function fn6(){
        var box2=document.getElementById("box2");
        box2.className="box6"
    }
    function fn7(){
        var box2=document.getElementById("box2");
        box2.className="box7"
    }
    function fn8(){
        var box2=document.getElementById("box2");
        box2.className="box8"
    }
</script>
</html>